<template>
  <div cclass="medicalAdvice-container">
    <div class="top-title-container">
      <modules-title title-name="常用医嘱">
        <template slot="btn">
          <div class="list-top-right">
            <el-button class="main-btn" plain size="small" type="primary" @click="createMedicalAdvice"
            >新建医嘱</el-button
            >
          </div>
        </template>
      </modules-title>
    </div>
    <div class="prescription-list-container">
      <div class="list-top-container">
        <div class="list-top-left" style="display: flex">
          <div style="width: 120px;line-height: 30px">常用医嘱</div>
          <el-input placeholder="搜索处方模板" v-model="search"></el-input>
          <el-button class="main-btn" size="small" @click="searchList" type="primary" style="margin-left: 10px">搜索</el-button>
          <el-button class="border-btn" size="small" @click="clearList" style="margin-left: 10px">重置</el-button>
        </div>
      </div>
      <div class="list-content-container">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          header-cell-class-name="table-header-cell"
        >
          <el-table-column prop="title" label="医嘱名称"> </el-table-column>
          <el-table-column prop="contents" label="医嘱内容"> </el-table-column>
          <el-table-column prop="CreatedAt" label="创建日期" align="center">
            <template #default="{row}">
              {{ row.CreatedAt | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center">
            <template slot-scope="scope">
              <div class="btn-container">
                <el-button type="text" @click="lookDetail(scope.row)">查看详情</el-button>
                <span>|</span>
                <el-button type="text" @click="editMedicalAdvice(scope.row)">编辑</el-button>
                <span>|</span>
                <el-button type="text" class="red-text-btn"  @click="deleteMedicalAdvice(scope.row)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="postData.pager.number"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="postData.pager.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {medicalAdviceList, medicalAdviceDelete} from "@/api/templates.js"
export default {
  name: "medicalAdvice",
  data() {
    return {
      search:'',
      tableMaxHeight: "650px",
      currentPage: 1,
      postData: {
        pager: {
          number: 1,
          size: 30,
          order_by: ""
        },
        title:''
      },
      listTotal:0,
      tableData: [],
    };
  },
  created(){
    this.getMedicalAdviceList(this.postData)
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.postData.pager.size = val
      this.getMedicalAdviceList(this.postData)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.postData.pager.number = val
      this.getMedicalAdviceList(this.postData)
    },
    createMedicalAdvice(){
      this.$router.push({
        name: "createMedicalAdvice",
      });
    },
    lookDetail(item){
      this.$router.push({
        name: "createMedicalAdvice",
        query: {
          id: item.ID,
          detail:1,
        }
      });
    },
    editMedicalAdvice(item){
      this.$router.push({
        name: "createMedicalAdvice",
        query: {
          id: item.ID
        }
      });
    },
    clearList(){
      this.search = ''
      this.postData.title = this.search
      this.getMedicalAdviceList(this.postData)
    },
    searchList(){
      this.postData.title = this.search
      this.getMedicalAdviceList(this.postData)
    },
    getMedicalAdviceList(datas){
      medicalAdviceList(datas).then(res=>{
        if(res.code==200){
          this.tableData = res.data.data||[]
          this.listTotal = res.data.total||0
        }
      })
    },
    deleteMedicalAdvice(item){
      medicalAdviceDelete(item.ID).then(res=>{
        if(res.code==200){
          this.getMedicalAdviceList(this.postData)
        }
      })
    }
  },
};
</script>
<style lang="scss">
@import "@/assets/scss/templates/medicalAdvice/medicalAdvice.scss";
</style>
